<template>
  <div>
    <a-modal
      :visible="showModal"
      :mask-closable="false"
      :keyboard="!formModal.loading"
      :closable="!formModal.loading"
      :title="'发送会议通知'"
      width="760px"
      :destroy-on-close="true"
      centered
      @cancel="cancelSub"
    >
      <!-- :destroyOnClose="true" 如果希望每次打开都是新内容，设置 destroyOnClose-->
      <a-form-model
        ref="sendForm"
        class="flex-model-form"
        :model="formModal.form"
        :rules="formModal.rules"
      >
        <a-form-model-item
          label="参会人员"
          prop="attendListObj"
        >
          <OrgStaffAsync
            ref="orgStaffAsync"
            v-model="formModal.form.attendListObj"
            class="select-wrapper"
            placeholder="请选择参会人员"
            :form="formModal.form"
            key-value="unitId"
            :selected-value.sync="formModal.form.attendListObj"
            :is-leader="'0'"
            :checkable-all-org-staff="true"
            :is-lazy-load="false"
            @selectedObj="selectedLeaderObj"
          />
          <!-- <OrgStaffAsync
              ref="orgStaffAsync"
              class="attendlistTree"
              placeholder="请选择参会人员"
              v-model="formModal.form.attendListObj"
              :queryApi="getDesignEmployee"
              :selectedValue.sync="formModal.form.attendListObj"
              :isLeader="'0'"
              :checkableAllOrgStaff="true"
              :isLazyLoad="false"
              @selectedObj="selectedLeaderObj"
            /> -->
        </a-form-model-item>
      </a-form-model>
      
      <template slot="footer">
        <a-button
          key="back"
          :disabled="formModal.loading"
          @click="cancelSub"
        >
          取消
        </a-button>
        <a-button
          v-if="!eidtabled"
          key="submit"
          type="primary"
          :loading="formModal.loading"
          @click="submitForm"
        >
          确认
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>

// import OrgStaffAsync from '@/components/TreeSelectOrganization/orgStaffAsync.vue'
import OrgStaffAsync from '../components/orgStaffAsync.vue'
import { getProjectIdFromOrg } from '@/api/commons'
import { reservationMessage } from '@/api/office/anualConference/index'
export default {
    name: 'SendMessage',
    props: {
      visible: {
        type: Boolean,
        default() {
            return true
        }
      },
      id: {
        type: String,
        default() { return '' }
      },
      unitId: {
        type: [String, null],
        default() {
          return null
        }
      },
      unitName: {
        type: [String, null],
        default() {
          return null
        }
      },
      defaultValue: {
        type: Array,
        default() { return [] }
      }
    },
    components: {
      OrgStaffAsync
    },
    data() {
        return {
          formItemData: {
            equipmentType: []
          },
          formModal: {
            loading: false,
            form: {
              unitId: null,
              attendListObj: [],
              attendList: []
            },
            rules: {
              attendListObj: [
                { required: true, message: '请选择参会人员', trigger: 'change' },
              ],
            },
          },
        }
    },
    watch: {
      unitId: {
        handler(nv, old) {
          if (nv) this.formModal.form.unitId = this.unitId;
        }
      },
      visible: {
        handler(nv, old) {
          if (nv) {
            this.formModal.form.attendList = this.defaultValue;
            this.formModal.form.attendListObj = this.defaultValue.map(e => e.employeeId);
          }
        }
      },
    },
    computed: {
      showModal() {
        return this.visible
      },
      eidtabled() {
        return this.modalType === 'look'
      },
      equipmentType() {
        let res = this.formItemData.equipmentType
        return res
      }
    },
    created() {
      this.formModal.form.unitId = this.unitId;
    },
    mounted() {
      // console.log(this.formModal)
    },
    methods: {
      cancelSub(reset) {
        // this.$refs.sendForm.resetFields();
        // this.picture = [];
        // let re = reset == 'reset' ? { reset } : null
        this.$emit('cancelSub')
      },
      submitForm(param) {
        this.$refs.sendForm.validate(valid => {
          if (valid) {
            const param = {
              id: this.id,
              attendEmployee: this.formModal.form.attendList
            };
            this.formModal.loading = true;
            reservationMessage(param).then((res) => {
              this.formModal.loading = false;
              if (res && res.data && res.data.code == 200) {
                  this.$message.success('发送成功')
              } else {
                  this.$message.error('发送失败！');
              }
              this.$emit('cancelSub', 'refresh');
            }).catch(() => {
                this.formModal.loading = false;
            })
            // this.onSubmit(this.formModal.form)
          } else {
            return false;
          }
        });
      },
      async getDesignEmployee(){
        try {
          const res = await getProjectIdFromOrg({pid:this.unitId,parentCodes:['designManage'],pageNum:1,pageSize:100})
          return Promise.resolve({
            status: 200,
            data: res.data.list || []
          })
        } catch (e) {
          return Promise.reject(e)
        }
      },
      selectedLeaderObj(val) {
        if (!val) return;
        this.formModal.form.attendList = val.map((item, index) => {
          let obj = {
            employeeId: item.id,
            userId: item.userId,
            userName: item.name,
            unitId: this.unitId,
            unitName: this.unitName,
            deptId: item.pId
          }
          return obj
        })
      },
    },
}
</script>
<style lang="less">
  .upload-list .ant-upload-list {
    // display: contents;
  }
  .ant-select-tree{
    text-align: left;
  }
</style>
<style lang="less" scoped>
@deep: ~'>>>';
.select-wrapper {
@{deep} .ant-select-search__field {
  display: none;
}
}
</style>